<template>
  <div class="flow-setting-auth-table">
    <div class="flow-setting-auth-table-header">
      <div
          :class="{ 'flow-setting-auth-table-name-column-30': !readable, 'flow-setting-auth-table-name-column-25': readable }">
        <span>表单</span>
      </div>
      <div class="flow-setting-auth-table-option-column">
        <div
            :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }"
            v-if="readable">
          <el-checkbox :checked="writableChecked" v-model="writableChecked" @change="onAllWritableChange">
            编辑
          </el-checkbox>
        </div>
        <div
            :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }">
          <el-checkbox :checked="readableChecked" v-model="readableChecked" @change="onAllReadableChange">
            只读
          </el-checkbox>
        </div>
        <div
            :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }">
          <el-checkbox :checked="displayableChecked" v-model="displayableChecked" @change="onAllDisplayableChange">
            隐藏
          </el-checkbox>
        </div>
      </div>
    </div>
  
    <div class="flow-setting-auth-table-body">
      <div class="flow-setting-auth-table-name-column-row" v-for="(item, i) in formData" :key="i">
        <div
            :class="{ 'flow-setting-auth-table-name-column-30': !readable, 'flow-setting-auth-table-name-column-25': readable }">
          <span>{{ item.name }}</span>
        </div>
        <div class="flow-setting-auth-table-option-column">
          <div
              :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }"
              v-if="readable">
            <!--            <el-radio v-model="item.writable" :label="item.writable" :name="item.id" @change="writableChange($event, item)">编辑</el-radio>-->
            <el-checkbox :checked="item.options.writable" v-model="item.options.writable" @change="writableChange($event, item)">
              编辑
            </el-checkbox>
          </div>
          <div
              :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }">
            <!--            <el-radio v-model="item.readable" :label="item.readable" :name="item.id" @change="writableChange($event, item)">只读</el-radio>-->

            <el-checkbox :checked="item.options.readable" v-model="item.options.readable" @change="readableChange($event, item)">
              只读
            </el-checkbox>
          </div>
          <div
              :class="{ 'flow-setting-auth-table-option-column-item-50': !readable, 'flow-setting-auth-table-option-column-item-25': readable }">
            <el-checkbox :checked="item.options.displayable" v-model="item.options.displayable"
                         @change="displayableChange($event, item)">
              隐藏
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="FlowDrawerAuthForm">
// import { flowMixin } from '../mixins/flowMixin';
import flowhook from '../mixins/flowhook';

import {
  reactive,
  ref,
  watch,
  createApp,
  computed,
  onMounted,
  toRefs,
  getCurrentInstance
} from "vue";
import {useStore} from 'vuex';
const {uuid, nameClass, delNode} = flowhook();
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const emit = defineEmits(['update:value'])
const {currentInstance, proxy} = getCurrentInstance();


const props = defineProps({
  readable: {
    type: Boolean,
    default: false,
  },
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  value: {
    type: Array,
    default: function () {
      return [];
    },
  },
})

const {node, readable, value} = toRefs(props)
const formData = ref([]);
// 在组件挂载之后执行的操作
onMounted(() => {
  console.log('组件挂载之后',store.state.form.config);
  console.log('组件挂载之后',JSON.stringify(value.value));
  formData = proxy.$deepCopy(store.state.form.config);
  // store.state.form.config;
});

const fields = computed(() => {
  console.log("fields------------------->", store.state.form.config)
  formData = proxy.$deepCopy(store.state.form.config);
  return formData;
})

watch(value, (newValue, oldValue) => {
  console.log("value-----------改变了",JSON.stringify(newValue))
}, {immediate: value})

const writableChecked = computed(() => {
  console.log("fields", fields)
  return value.value.filter((item) => item.options.writable === false).length === 0;
})

const readableChecked = computed(() => {
  return value.value.filter((item) => item.options.readable === false).length === 0;
})

const displayableChecked = computed(() => {
  return value.value.filter((item) => item.options.displayable === false).length === 0;
})

// const requiredChecked = computed(() => {
//   return fields.value.filter((item) => item.required === false).length === 0;
// })


const onAllWritableChange = (e) => {
  value.value.forEach((item, i) => {
    writableChange(e, item);
  });
}
/**
 * 全选只读
 * @param {*} e
 */
const onAllReadableChange = (e) => {
  for (let item of value.value) {
    readableChange(e, item);
  }
}
/**
 * 全选隐藏
 * @param {*} e
 */
const onAllDisplayableChange = (e) => {
  value.value.forEach((item, i) => {
    displayableChange(e, item);
  });
}
/**
 * 全选必填
 * @param {*} e
 */
const onAllRequiredChange = (e) => {
  value.value.forEach((item, i) => {
    displayableRequired(e, item);
  });
}
/**
 * 编辑
 * @param {*} e
 * @param {*} item
 */
const writableChange = (e, item) => {
  item.options.writable = e;
  if (e) {
    item.options.readable = !e;
    item.options.displayable = !e;
  } else {
    item.options.required = e;
  }
  changePrivilege();
}
/**
 * 只读
 * @param {*} e
 * @param {*} item
 */
const readableChange = (e, item) => {
  item.options.readable = e;
  if (e) {
    item.options.writable = !e;
    item.options.displayable = !e;
    item.options.required = !e;
  }

  console.log("只读", item)
  // this.$forceUpdate();

  changePrivilege();
}
/**
 * 隐藏
 * @param {*} e
 * @param {*} item
 */
const displayableChange = (e, item) => {
  item.options.displayable = e;
  if (e) {
    item.options.writable = !e;
    item.options.readable = !e;
    item.options.required = !e;
  }

  changePrivilege();
}
/**
 * 必填
 * @param {*} e
 * @param {*} item
 */
const displayableRequired = (e, item) => {
  item.options.required = e;
  if (e) {
    item.options.readable = !e;
    item.options.displayable = !e;
    item.options.writable = e;
  }
  changePrivilege();
}
const changePrivilege = () => {
  emit('update:value', formData.value);
}
</script>
